<script setup lang="ts">
import dayjs from 'dayjs'
import type { InfoGridItem } from './ProjectTable.vue'
import { fetchProjectNodeListAPI } from '@/apis/fetchProjectNodeList'
import router from '@/router'
import { useProjectConfigStore } from '@/store/projectConfig'
import { useUserInfoStore } from '@/store/userInfo'

const props = defineProps<{
  project: Project
}>()

const userInfoStore = useUserInfoStore()
const projectConfigStore = useProjectConfigStore()

const activeNodes = ref<ProjectNode[]>([])

onMounted(async () => {
  const res = await fetchProjectNodeListAPI({
    project_id: props.project.id!.toString()!,
  }, userInfoStore.userInfo!.token!)
  if (res.data?.code === 1)
    activeNodes.value = res.data?.data || []
  else
    uni.showToast({ title: res.data?.msg, icon: 'none' })
})

function getTableInfo(project: Project): InfoGridItem[] {
  if (userInfoStore.belongTo(['0'])) {
    return [
      { label: '业务员', value: project.salesman?.nickname || '未知' },
      { label: '项目总额', value: `¥${project.money_total}`, color: '#FF2636' },
      { label: '装修类型', value: project.project_type_name || '未知' },
      { label: '工期截止', value: project.duration ? dayjs.unix(Number(project.duration)).format('YYYY.MM.DD') : '未知' },
      { label: '装修面积', value: `${project.extent}` },
    ]
  }
  else if (userInfoStore.belongTo(['4'])) {
    return [
      { label: '业务员', value: project.salesman?.nickname || '未知' },
      { label: '项目总额', value: `¥${project.money_total}`, color: '#FF2636' },
      { label: '装修类型', value: project.project_type_name || '未知' },
      { label: '工期截止', value: project.duration ? dayjs.unix(Number(project.duration)).format('YYYY.MM.DD') : '未知' },
      { label: '装修面积', value: `${project.extent}` },
      { label: '业主', value: project.contacts_name || '未知', showTag: true },
    ]
  }
  else {
    return [
      { label: '业务员', value: project.salesman?.nickname || '未知' },
      { label: '项目总额', value: `¥${project.money_total}`, color: '#FF2636' },
      { label: '装修类型', value: project.project_type_name || '未知' },
      { label: '工期截止', value: project.duration ? dayjs.unix(Number(project.duration)).format('YYYY.MM.DD') : '未知' },
      { label: '装修面积', value: `${project.extent}` },
      { label: '项目节点', value: project.node_name || '未知', color: '#FE6F15' },
    ]
  }
}

function handleTapContacts() {
  router.push({
    name: 'projectContacts',
    params: {
      project_id: props.project.id!.toString()!,
    },
  })
}

function handleTapProjectNodes() {
  router.push({
    name: 'projectNodes',
    params: {
      project_id: props.project.id!.toString()!,
    },
  })
}

const isShowWarning = computed(() => {
  const isWillOutofdate = Number(props.project.duration) - dayjs(Date.now()).unix() < 864000
  const neededShow = props.project.status?.toString() !== '3'
  return isWillOutofdate && neededShow
})
</script>

<template>
  <view class="flex flex-col bg-white rounded-20rpx">
    <!-- 卡片 Header START -->
    <view class="px-30rpx pt-30rpx pb-6rpx">
      <ProjectCardHeader
        :project-name="project.name"
        :node-name="project.node_name"
        :state="projectConfigStore.projectStatusStr[project.status?.toString()!]"
        state-tag-color="#FF6D0A"
        :is-hide-current-node="projectConfigStore.projectStatusStr[project.status?.toString()!] === '售后中'"
        :is-show-warning="isShowWarning"
      />
    </view>
    <!-- 卡片 Header END -->
    <view class="p-30rpx">
      <ProjectTable :info="getTableInfo(project)" />
    </view>
    <view class="px-30rpx">
      <ProjectNodes
        :active-nodes="activeNodes"
        :nodes="projectConfigStore.nodeLists[props.project.project_type_id!]"
      />
    </view>
    <view class="p-30rpx">
      <ProjectCardActions @tap-contacts="handleTapContacts" @tap-project-nodes="handleTapProjectNodes" />
    </view>
    <block v-if="projectConfigStore.projectStatusStr[project.status?.toString()!] === '售后中'">
      <Divider />
      <!-- 卡片 Footer START -->
      <view
        v-if="projectConfigStore.projectStatusStr[project.status?.toString()!] === '售后中'"
        class="flex flex-row-reverse justify-between items-center p-30rpx"
      >
        <view v-if="project.status?.toString() === '3'" class="flex">
          <RGButton size="medium" corner="small" type="primary">
            发起售后
          </RGButton>
        </view>
      </view>
      <!-- 卡片 Footer END -->
    </block>
  </view>
</template>
